<template>
  <!-- 查询业务 -->
  <el-form :inline="true" :model="SearchData">
    <el-form-item label="技术栈">
      <el-input v-model="SearchData.skillName" placeholder="请输入技术栈" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getTable(1)">查询</el-button>
      <el-button type="primary" @click="getTable(1,'重置')">重置</el-button>
    </el-form-item>
  </el-form>
  <!-- 添加业务 -->
  <el-button type="primary" @click="addStateObj">
    添加技术栈
  </el-button>
  <el-dialog v-model="addState" title="添加技术栈" width="40%" draggable>
    <el-form :inline="true" :model="addData" class="demo-form-inline">
      <el-form-item label="技术栈">
        <el-input v-model="addData.skillName" placeholder="请输入技术栈" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addState = false">取消</el-button>
        <el-button type="primary" @click="addTable">
          添加
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 展示业务 -->
  <tablePage 
  :tableTitle="tableTitle" 
  @getTableData = 'getTable' 
  @deleteTable = 'deleteTable' 
  @updateTable="updateStateObj" 
  :tableData = 'data'  >
  </tablePage>

<!-- 修改业务业务 -->
  <el-dialog v-model="xiugaistate" title="修改技术栈" width="40%" draggable>
    <el-form :model="updateData" class="demo-form-inline">
      <el-form-item label="技术栈">
        <el-input v-model="updateData.skillName" placeholder="请输入技术栈" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="xiugaistate = false">取消</el-button>
        <el-button type="primary" @click="updateTable">
          确认修改
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import tablePage from '../components/table.vue'
import {jishuzhanInsert,jishuzhanSelect,jishuzhanUpdate,jishuzhanDelete} from '../utils/api.js'
import { reactive, ref, onMounted } from 'vue'
/* 每页显示多少条数据 */
import { limit } from '../utils/utilsData'
/* 添加数据的弹框状态 */
const addState = ref(false)
/* 添加弹框状态--修改函数 */
const addStateObj = () => { 
  if (addState.value) { 
    addState.value = false
    return
  }
  addState.value = true
  addData.value = {
    //  添加模态框的字段需要清空
    skillName:''
  }
  addState.value = true
}
/* 修改数据的弹框状态 */
const xiugaistate = ref(false)
/* 修改弹框状态--修改函数 */
const updateStateObj = (row) => { 
  if (xiugaistate.value) { 
    xiugaistate.value = false
    return
  }
  xiugaistate.value = true
  /* 该函数内部要将表格行数据绑定在修改表单的数据上 */
  updateData.id = row.id
  updateData.skillName = row.skillName
}
/* 表格的字段名及对应中文意思 */
const tableTitle = [
  {key:'id',name:'技术栈编号'},
  {key:'skillName',name:'技术栈名称'},
]
/* 表格需要的数据 */
const data = reactive({
  nowPage: 1,
  maxPage: 1,
  data: []
})
/* 查询表单数据 -- 这里修改查询字段*/
const SearchData = reactive({
  // 每页多少条数据
  limit: limit,
  // 要查询的字段
  skillName: ''
})
/* 添加表单的数据 -- 这里修改添加字段*/
const addData = ref({
  skillName: ''
})
/* 修改表单的数据 -- 这里修改更新字段*/
const updateData = ref({
  id:'',
  skillName: ''
})
/* 分页及多条件的查询接口 -- 函数 ajax */
const getTable = (pageNum,chongzhiState?) => { 
  console.log(pageNum)
  // if (chongzhiState) { 
  //   /* 将所有查询条件设置为空 */
  //   xxxx-Select({
  //   page: pageNum,
  //   ...SearchData
  // }).then(resp => { 
  //   data.nowPage = resp.nowPage
  //   data.maxPage =  resp.maxPage
  //   data.data = resp.data
  // })
  // data.nowPage = pageNum
  // }
/*   发起ajax 例子如下
  jishuzhanSelect({
    limit:limit,
    page: pageNum,
    skillName:SearchData.skillName
  }).then(resp => { 
    data.nowPage = resp.nowPage
    data.maxPage =  resp.maxPage
    data.data = resp.data
  })
  data.nowPage = pageNum */
}

/* 添加业务--函数ajax */
const addTable = () => { 
 /*  发起ajax 例子如下
  jishuzhanInsert({
    skillName:addData.skillName
  }).then(res => {
    addStateObj()
    getTable(1)
  }) */
}
/* 查询业务--函数ajax */
const updateTable = () => { 
/*   发起ajax 例子如下
  jishuzhanUpdate({
    id:updateData.id,
    skillName:updateData.skillName
  }).then(resp => { 
    updateStateObj()
    getTable(1)
  }) */
}
/* 删除业务--函数ajax */
const deleteTable = (row) => { 
/*   发起删除ajax 例子如下
  jishuzhanDelete({
    id:row.id
  }).then(resp => { 
    getTable(1)
  }) */
}
/* 页面加载完毕后执行的函数--渲染首页数据 */
onMounted(() => { 
  getTable(1)
})

</script>
<style scoped>
</style>